<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商家订单历史</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 已生产按钮样式 */
        .producing-button {
            background-color: #28a745;
        }

        /* 已发货按钮样式 */
        .shipping-button {
            background-color: #ffc107;
        }

        /* 生产完成发货按钮样式 */
        .production-complete-button {
            background-color: #28a745; /* 绿色 */
        }

        /* 运输完成按钮样式 */
        .transport-complete-button {
            background-color: #dc3545; /* 红色 */
        }

        /* 订单已结束按钮样式 */
        .order-ended-button {
            background-color: #ccc;
            color: #666;
            cursor: not-allowed;
        }

        /* 弹出框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 修改视频样式 */
        #videoModal video {
            width: 80%;
            max-width: 300px;
        }

        /* 不可用按钮样式 */
        .disabled-button {
            background-color: #ccc;
            color: #666;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
<!-- 用于显示订单信息的表格 -->
<table id="orderHistoryTable">
    <thead>
    <tr>
        <th>用户 ID</th>
        <th>商家 ID</th>
        <th>收货地址</th>
        <th>电话</th>
        <th>备注</th>
        <th>总价格</th>
        <th>交易状态</th>
        <th>订单状态</th>
        <th>订单号</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- 订单详情弹出框 -->
<div id="orderDetailsModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>订单详情</h2>
        <table id="orderDetailsTable">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>数量</th>
                <th>总价格</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- 视频弹出框 -->
<div id="videoModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>制作视频</h2>
        <video controls>
            <source id="videoSource" src="" type="video/mp4">
            您的浏览器不支持视频播放。
            </source>
        </video>
    </div>
</div>

<script>
    // 从 cookie 中获取 JWT Token
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    $(document).ready(function () {
        const token = getCookie('jwtToken');
        if (!token) {
            console.error('未找到 JWT Token');
            return;
        }

        // 发送 AJAX 请求获取用户 ID
        $.ajax({
            url: '/BusinessOrder/getRoleAndUserId',
            type: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`
            },
            success: function (response) {
                if (response) {
                    const merchantId = response.id;
                    // 调用后端的 getOrderList 接口获取订单历史信息
                    $.ajax({
                        url: '/BusinessOrder/getOrderList',
                        type: 'GET',
                        data: {
                            userId: merchantId
                        },
                        success: function (data) {
                            // 清空表格主体
                            $('#orderHistoryTable tbody').empty();
                            // 遍历订单数据并填充表格
                            data.forEach(function (order) {
                                const row = $('<tr></tr>');
                                row.append(`<td>${order['用户 ID']}</td>`);
                                row.append(`<td>${order['商家 ID']}</td>`);
                                row.append(`<td>${order['收货地址']}</td>`);
                                row.append(`<td>${order['电话']}</td>`);
                                row.append(`<td>${order['备注']}</td>`);
                                row.append(`<td>${order['总价格']}</td>`);
                                // 显示交易状态
                                row.append(`<td>${order['交易状态']}</td>`);
                                // 显示订单状态
                                row.append(`<td>${order['订单状态']}</td>`);
                                row.append(`<td>${order['订单号']}</td>`);

                                // 创建操作列
                                const operationTd = $('<td></td>');

                                // 创建查看制作视频按钮
                                const videoButton = $('<button>查看制作视频</button>');
                                const orderNumber = order['订单号'];
                                // 先默认按钮不可用
                                videoButton.addClass('disabled-button');
                                videoButton.prop('disabled', true);

                                // 调用后端接口获取视频 URL
                                $.ajax({
                                    url: `/BusinessOrder/getvideourls/${orderNumber}`,
                                    type: 'GET',
                                    headers: {
                                        'Authorization': `Bearer ${token}`
                                    },
                                    success: function (videoUrls) {
                                        // 假设这里只取第一个视频 URL，你可以根据实际情况调整
                                        const videoUrl = videoUrls[0];
                                        if (videoUrl && videoUrl.trim()!== '') {
                                            // 有有效视频链接，按钮可用
                                            videoButton.removeClass('disabled-button');
                                            videoButton.prop('disabled', false);
                                            videoButton.click(function () {
                                                $('#videoSource').attr('src', videoUrl);
                                                const video = $('#videoSource')[0].parentNode;
                                                video.load(); // 重新加载视频
                                                video.play(); // 尝试播放视频
                                                $('#videoModal').show();
                                            });
                                        }
                                    },
                                    error: function (error) {
                                        console.error('获取视频 URL 时出错:', error.statusText);
                                        alert('获取视频 URL 时出错，请稍后重试');
                                    }
                                });
                                operationTd.append(videoButton);

                                // 创建上传制作视频按钮
                                const uploadButton = $('<button>上传制作视频</button>');
                                uploadButton.data('order-number', order['订单号']);
                                uploadButton.click(function () {
                                    const orderNumber = $(this).data('order-number');
                                    const fileInput = $('<input type="file" accept="video/*">');
                                    fileInput.click();
                                    fileInput.on('change', function () {
                                        const file = this.files[0];
                                        if (file) {
                                            const formData = new FormData();
                                            formData.append('file', file);
                                            formData.append('orderNumber', orderNumber);
                                            $.ajax({
                                                url: '/BusinessOrder/uploadToQiniu',
                                                type: 'POST',
                                                data: formData,
                                                contentType: false,
                                                processData: false,
                                                headers: {
                                                    'Authorization': `Bearer ${token}`
                                                },
                                                success: function (response) {
                                                    if (response.success) {
                                                        alert('文件上传成功，video_url 更新成功');
                                                        // 刷新页面
                                                        location.reload();
                                                    } else {
                                                        alert('文件上传失败: ' + response.message);
                                                    }
                                                },
                                                error: function (error) {
                                                    console.error('上传文件时出错:', error.statusText);
                                                    alert('上传文件时出错，请稍后重试');
                                                }
                                            });
                                        }
                                    });
                                });
                                operationTd.append('&nbsp;').append(uploadButton);

                                // 创建查看订单详情按钮
                                const detailsButton = $('<button>查看订单详情</button>');
                                detailsButton.data('order-details', order['订单详情']);
                                detailsButton.click(function () {
                                    const details = $(this).data('order-details');
                                    const detailsTableBody = $('#orderDetailsTable tbody');
                                    detailsTableBody.empty();
                                    if (details) {
                                        details.forEach(function (detail) {
                                            const subRow = $('<tr></tr>');
                                            subRow.append(`<td>${detail['商品名称']}</td>`);
                                            subRow.append(`<td>${detail['数量']}</td>`);
                                            subRow.append(`<td>${detail['总价格']}</td>`);
                                            detailsTableBody.append(subRow);
                                        });
                                    }
                                    $('#orderDetailsModal').show();
                                });
                                operationTd.append('&nbsp;').append(detailsButton);

                                // 创建开始生产按钮
                                const produceButton = $('<button></button>');
                                if (order['订单状态'] === '订单已支付') {
                                    produceButton.text('开始生产');
                                    produceButton.click(function () {
                                        if (confirm('确定要开始生产该订单吗？')) {
                                            $.ajax({
                                                url: '/BusinessOrder/toProduct',
                                                type: 'POST',
                                                contentType: 'application/json',
                                                data: JSON.stringify({
                                                    merchantOrderNumber: order['订单号']
                                                }),
                                                success: function () {
                                                    alert('订单已开始生产');
                                                    // 刷新页面
                                                    location.reload();
                                                },
                                                error: function (error) {
                                                    console.error('开始生产请求出错:', error.statusText);
                                                }
                                            });
                                        }
                                    });
                                } else {
                                    produceButton.text('订单已生产');
                                    produceButton.addClass('order-ended-button');
                                    produceButton.prop('disabled', true);
                                }
                                operationTd.append('&nbsp;').append(produceButton);

                                // 创建发货按钮
                                const shipButton = $('<button></button>');
                                if (order['订单状态'] === '生产中') {
                                    shipButton.text('订单生产完成，开始发货');
                                    shipButton.addClass('production-complete-button');
                                    shipButton.click(function () {
                                        if (confirm('确定要开始发货该订单吗？')) {
                                            $.ajax({
                                                url: '/BusinessOrder/toTransacte',
                                                type: 'POST',
                                                contentType: 'application/json',
                                                data: JSON.stringify({
                                                    merchantOrderNumber: order['订单号']
                                                }),
                                                success: function () {
                                                    alert('订单已开始发货');
                                                    // 刷新页面
                                                    location.reload();
                                                },
                                                error: function (error) {
                                                    console.error('发货请求出错:', error.statusText);
                                                }
                                            });
                                        }
                                    });
                                } else if (order['订单状态'] === '订单运输中') {
                                    shipButton.text('运输完成，订单结束');
                                    shipButton.addClass('transport-complete-button');
                                    shipButton.click(function () {
                                        if (confirm('确定该订单运输完成吗？')) {
                                            $.ajax({
                                                url: '/BusinessOrder/endOrder',
                                                type: 'POST',
                                                contentType: 'application/json',
                                                data: JSON.stringify({
                                                    merchantOrderNumber: order['订单号']
                                                }),
                                                success: function () {
                                                    alert('订单已完成');
                                                    // 刷新页面
                                                    location.reload();
                                                },
                                                error: function (error) {
                                                    console.error('订单完成请求出错:', error.statusText);
                                                }
                                            });
                                        }
                                    });
                                } else if (order['订单状态'] === '订单已完成') {
                                    shipButton.text('订单已结束');
                                    shipButton.addClass('order-ended-button');
                                    shipButton.prop('disabled', true);
                                } else {
                                    shipButton.text('订单未生产，无法发货');
                                    shipButton.addClass('shipping-button');
                                    shipButton.prop('disabled', true);
                                }
                                operationTd.append('&nbsp;').append(shipButton);

                                row.append(operationTd);

                                $('#orderHistoryTable tbody').append(row);
                            });
                        },
                        error: function (error) {
                            console.error('获取订单历史信息时出错:', error.statusText);
                        }
                    });
                } else {
                    console.error('获取商家 ID 失败');
                }
            },
            error: function (error) {
                console.error('请求获取商家 ID 时出错:', error.statusText);
            }
        });

        // 关闭弹出框
        $('.close').click(function () {
            $('#orderDetailsModal').hide();
            $('#videoModal').hide();
            // 清空视频源，避免下次打开时显示上次的视频
            $('#videoSource').attr('src', '');
        });
        $(window).click(function (event) {
            if (event.target === $('#orderDetailsModal')[0] || event.target === $('#videoModal')[0]) {
                $('#orderDetailsModal').hide();
                $('#videoModal').hide();
                // 清空视频源，避免下次打开时显示上次的视频
                $('#videoSource').attr('src', '');
            }
        });
    });
</script>
</body>

</html>